<template>
    <view class="content">
        <image src="../../static/image/sw_bg.jpg" class="sw-bg"></image>
        <!-- <u-navbar title="商务合作" title-color="#fff" :background="background" :border-bottom="false" :immersive="true" :is-back="false"></u-navbar> -->
        <!-- :style="{paddingTop: statusBar + 60 + 'px'}" -->
        <view class="wrapper" >
            <view class="b-item" v-for="(item, index) in list" :key="index" @click="toPage('/pages/word-details/word-details?id=' + item.id)">
                <image :src="item.image" class="b-img"></image>
                <view class="b-item-right">
                    <view class="b-name">{{item.name}}</view>
                    <view class="b-sub">{{item.describes}}</view>
                </view>
                <image src="../../static/icon/arrow_r.png" class="arrow-r"></image>
            </view>
            
            <view style="height: 94rpx;padding-top: 30rpx;">
                <u-loadmore :status="status" v-if="status != 'loadmore'" />
            </view>
        </view>
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#40bef1" height="110" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [
                    {
                        iconPath: "/static/icon/tab.png",
                        selectedIconPath: "/static/icon/tab.png",
                        text: '',
                        pagePath: "/pages/tabbar/index",
                        customIcon: false
                    },{
                        iconPath: "/static/icon/tab_01.png",
                        selectedIconPath: "/static/icon/tab_02.png",
                        text: '活动',
                        customIcon: false,
                        pagePath: "/pages/tabbar/activity"
                    },{
                        iconPath: "/static/icon/tab_03.png",
                        selectedIconPath: "/static/icon/tab_04.png",
                        text: '商务合作',
                        customIcon: false,
                        pagePath: "/pages/tabbar/work"
                    },{
                        iconPath: "/static/icon/tab_05.png",
                        selectedIconPath: "/static/icon/tab_06.png",
                        text: '城会玩',
                        customIcon: false,
                        pagePath: "/pages/tabbar/city-games"
                    },{
                        iconPath: "/static/icon/tab_07.png",
                        selectedIconPath: "/static/icon/tab_08.png",
                        text: '个人中心',
                        customIcon: false,
                        pagePath: "/pages/tabbar/mine"
                    }
                ],
                status: 'loadmore', //是否显示没有更多了
                page: 1,
                list: [],
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	} 
            });
            this.getList()
        },
        onReachBottom() {
        	if(this.page == 1){return}
        	this.getList()
        },
        methods: {
            toPage(url) {
                if (!this.$getSync('userToken')) {
                    this.$gTo('/pages/login/loginH')
                } else {
                    this.$gTo(url)
                }
            },
            
            // 获取列表
            getList() {
            	if (this.status == 'nomore') return;
            	this.status = 'loading';
            	this.$ajax('cooperation', {
            		user_token: this.$getSync('userToken'),
            		page: this.page,
            		limit: 10,
            	}).then(ret => {
            		if (ret.success == 1000) {
            			if (ret.detail && ret.detail.cooperation && ret.detail.cooperation.length > 0) {
            				this.list = this.list.concat(ret.detail.cooperation);
            				this.page++;
            				this.status = 'loadmore'
            			} else {
            				this.status = 'nomore'
            			}
            		} else {
            			this.$toast(ret.msg);
            		}
            	});
            },
            
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            // onPageScroll: function(e) {
            // 	//nvue暂不支持滚动监听，可用bindingx代替
            // 	// console.log("滚动距离为：" + e.scrollTop);
            // 	let a = e.scrollTop * 0.05;
            // 	if (a > 1) {
            // 		a = 1;
            // 	}
            // 	if (e.scrollTop == 0) {
            // 		this.background.backgroundColor = 'rgba(64,190,241,0)';
            // 	} else {
            // 		this.background.backgroundColor = 'rgba(64,190,241,' + a + ')';
            // 	}
            // }, 
        }
    };
</script>

<style>
    .u-tabbar__content__item .u-icon__img {
    	width: 50rpx !important;
    	height: 50rpx !important;
    }
</style>

<style lang="scss">
    /deep/.u-tabbar__content>.u-tabbar__content__item:first-child .u-icon__img{
        width: 132rpx !important;
        height: 50rpx !important;
        margin-top: 15rpx;
    }
    
    page{
        background-color: #f5f5f5;
    }
    .sw-bg{
        width: 750rpx;
        height: 470rpx;
    }
    .wrapper{
        width: 750rpx;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        padding: 20rpx;
    }
    .b-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        padding: 35rpx 25rpx;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
    }
    .b-img{
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        border: 2rpx solid #f5f5f5;
        margin-right: 20rpx;
    }
    .b-item-right{
        flex: 1;
    }
    .b-name{
        width: 480rpx;
        font-size: 28rpx;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 10rpx;
    }
    .b-sub{
        font-size: 24rpx;
        color: #7d7d7d;
        line-height: 28rpx;
        height: 54rpx;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .arrow-r{
        width: 26rpx;
        height: 8rpx;
        margin-left: 10rpx;
    }
    

</style>
